<template>
  <div>
    <el-card shadow="never" class="mb20">
      <el-row>
        <el-col :span="10">
          <el-radio-group class="mr20" v-model="timeType" @change="handleTimeTypeChange">
            <el-radio-button :label="0">年</el-radio-button>
            <el-radio-button :label="1">月</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-if="!timeType"
            v-model="timeValue"
            type="year"
            value-format="yyyy"
            placeholder="选择年"
            @change="handleTimeChange"
          />
          <el-date-picker
            v-else
            v-model="timeValue"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择年"
            @change="handleTimeChange"
          />
        </el-col>
      </el-row>
    </el-card>

    <!-- <swiper ref="mySwiper" :options="swiperOption">
    <swiper-slide>-->
    <el-card shadow="never" class="mb20">
      <div slot="header">职务权力防控</div>
      <el-row>
        <el-col :span="7">
          <el-card shadow="never" class="border-none">
            <!-- <h3>职务权力防控</h3> -->
            <div id="pie" :style="{width: '100%', height: '400px'}"></div>
          </el-card>
        </el-col>
        <el-col :span="17">
          <el-card shadow="never" style="height: 100%; border:none">
            <!-- <h3>权力事项完成情况</h3> -->
            <div id="pie-two" :style="{width: '100%', height: '400px'}"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="mb20">
      <div slot="header">风险预警防控</div>
      <el-row>
        <el-col :span="7">
          <div style="height: 100%">
            <!-- <h3>各科室风险处置情况</h3> -->
            <e-table
              ref="eTable"
              :tableData="tableData"
              :columns="columns"
              :maxHeight="300"
              :loading="loading"
              :pageObj="null"
              :border="null"
              @row-click="handleDeptRow"
            ></e-table>
          </div>
        </el-col>
        <el-col :span="17">
          <div class="flex justify-content" v-if="prewarningObj">
            <h3 class="mr10">
              风险预警数：
              <el-button
                class="red fs32 mb0"
                @click="handleWarningNum"
                type="text"
                v-text="prewarningObj.warningTotal"
              />
            </h3>
            <h3 class="mr10">
              预警规则数：
              <el-button
                type="text"
                class="fs32 mb0"
                @click="handleWarningNum"
                v-text="prewarningObj.mattersTotal"
              />
            </h3>
            <h3 class="mr10">
              已处置数：
              <el-button
                type="text"
                class="fs32 green mb0"
                @click="handleWarningNum"
                v-text="prewarningObj.hasDisposalTotal"
              />
            </h3>
            <h3 class="mr10">
              未处置数：
              <el-button
                type="text"
                class="fs32 yellow"
                @click="handleWarningNum"
                v-text="prewarningObj.notDisposalTotal"
              />
            </h3>
            <h3 class="mr10">
              处置驳回数：
              <el-button
                type="text"
                class="fs32 yellow"
                @click="handleWarningNum"
                v-text="prewarningObj.reject"
              />
            </h3>
            <h3>
              待审核：
              <el-button
                type="text"
                class="fs32 yellow"
                @click="handleWarningNum"
                v-text="prewarningObj.reviewed"
              />
            </h3>
          </div>
          <el-row>
            <el-col :span="12">
              <div id="pie-center" :style="{width: '100%', height: '400px'}"></div>
            </el-col>
            <el-col :span="12">
              <div id="pie-right" :style="{width: '100%', height: '400px'}"></div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="mb20">
      <div slot="header">核心指标监控</div>
      <el-row>
        <el-col>
          <el-card shadow="never">
            <!-- <h3>核心指标监控</h3> -->
            <div style="display: flex;overflow-x: scroll">
              <el-button class="mr20" @click="handleCoreDetail">查看明细</el-button>
              <div
                v-for="(item,index) in coreData"
                :key="index"
                @click="handleCoreClick(item,index)"
                :class="[ divLen === index ? 'bg-999' : '',  'tl-center mb10 mr20 padding10']"
              >
                <h3 class="mb0">{{ item.colname }}</h3>
                <p class="mb0">本期：{{ item.bengqi }}</p>
                <p class="mb0">同期：{{ item.tongqi }}</p>
              </div>
            </div>

            <el-row>
              <el-col>
                <div id="pie-area" :style="{width: '100%', height: '350px'}"></div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <div class="mb20">
      <el-row class="flex" style="justify-content: stretch">
        <el-col :span="16">
          <el-card shadow="never">
            <el-row>
              <el-col :span="18">
                <div id="pie-supplier" :style="{width: '100%', height: '400px'}"></div>
              </el-col>
              <el-col :span="6">
                <e-table
                  ref="eTable"
                  :tableData="supplierData"
                  :columns="supplierColumns"
                  :loading="supplierLoading"
                  :pageObj="null"
                  :border="null"
                  :maxHeight="350"
                  @row-click="handleSupplierRow"
                />
              </el-col>
            </el-row>
          </el-card>
          <el-card shadow="never">
            <el-row :gutter="16">
              <h3>综合考评管理</h3>
              <el-col :span="8">
                <h4>移动巡查完成情况</h4>
                <trans-table ref="transTable" />
              </el-col>
              <el-col :span="8">
                <h4>科室考评排名</h4>
                <div id="dept-right" :style="{width: '100%', height: '400px'}"></div>
              </el-col>
              <el-col :span="8">
                <h4>个人考评排名</h4>
                <person-table ref="personTable" />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="never">
            <h3>患者满意度</h3>
            <h4>服务单元患者满意度</h4>
            <part-table />
            <h4 class="mt20">服务窗口患者满意度</h4>
            <window-table />
          </el-card>
          <el-card shadow="never">
            <h4>医生回访率排名</h4>
            <doctor-table ref="doctorTable" />
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- <el-card shadow="never" class="mb20">
      <div slot="header"></div>
    </el-card>-->

    <el-card shadow="never">
      <div slot="header">资产管理</div>
      <el-row>
        <el-col :span="6">
          <pie1 />
        </el-col>
        <el-col :span="18">
          <line1 />
        </el-col>
      </el-row>
    </el-card>

    <!-- </swiper-slide>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-pagination" slot="pagination"></div> 
    </swiper>-->
  </div>
</template>

<script>
import TransTable from './TransTable'
import PersonTable from './PersonTable'
import PartTable from './PartTable'
import WindowTable from './WindowTable'
import DoctorTable from './DoctorTable'
import GoodsTable from './GoodsTable'
import Pie1 from '@/views/assetsNew/index/Pie1'
import Line1 from '@/views/assetsNew/index/Line1'

import { getSupplierTotal, getSupplierName, getWarningDisposalRate, getChargeDeptRate, getDeptRank, getCoreIndexList, getCoreIndexDetails, getWarningTotal, getProcessTypeTotal, getProcessStatusTotal } from '@/api/monitor'
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Pie1,
    Line1,
    swiper,
    swiperSlide,
    TransTable,
    PersonTable,
    PartTable,
    WindowTable,
    DoctorTable,
    GoodsTable
  },
  directives: {
    swiper: directive
  },
  data() {
    return {
      time: new Date().getFullYear() + '',
      timeType: 0,
      timeValue: null,
      divLen: 0,
      prewarningObj: null, //
      swiperOption: {
        pagination: '.swiper-pagination',
        autoplay: 10000,
        loop: false,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next'
      },
      tableData: [],
      columns: [
        {
          label: '排名',
          formatter(row, column, cellValue, index) {
            return index + 1
          }
        },
        {
          label: '科室名称',
          prop: 'deptName'
        },
        {
          label: '处置率',
          prop: 'disposalRate',
          formatter(row, column, cellValue, index) {
            return cellValue + '%'
          }
        }
      ],
      loading: false,
      supplierData: [],
      supplierColumns: [
        {
          label: '供应商名称',
          prop: 'supplierName'
        },
        {
          label: '准入时间',
          prop: 'accessTime'
        }
      ],
      supplierLoading: false,
      coreData: [],
      // legendData: [],
      // seriesData: [],
      polarCenter: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '风险预警',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 职务权力防控圆环图
      polar: {
        // title: {
        //   text: '职务权力防控',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          data: []
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      },
      // 面积图
      polar2: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line',
            areaStyle: {}
          }
        ]
      },
      // 职务权力防控堆叠柱状图
      polar3: {
        // title: {
        //   text: '权力事项完成情况',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['已完成', '未完成'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          // bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      },
      // 右侧柱状图
      polar4: {
        // title: {
        //   text: '预警处置监控',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['已处置', '未处置'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          // top: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: []
        },
        series: []
      },
      supplierPolar: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          data: []
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['35%', '55%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 70,
                lineStyle: {
                  color: '#333'
                }
              }
            },
            data: []
          }
        ]
      },
      deptPolar: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['钱', '分']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: []
        },
        series: [
          // {
          //   name: '钱',
          //   type: 'bar',
          //   data: []
          // },
          // {
          //   name: '分',
          //   type: 'bar',
          //   data: []
          // }
        ]
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted() {
    let _this = this
    this.$ls.set('monitorTime', this.time)
    this.timeValue = this.time

    // 各科室风险处置情况
    this.getChargeDeptRate({ year: this.time })

    // 科室考评排名
    this.getDeptRank({ year: this.time })

    // 核心指标监控列表
    this.getCoreList({ year: this.time })

    // 中间大屏
    this.getWarningTotal({ year: this.time })

    // 供应商圆环图请求数据
    getSupplierTotal().then(res => {
      // 第二屏，供应商圆环图
      let arr = res.data
      let legend = []
      let data = []
      arr.map(v => {
        legend.push(v.dictionariesName)
        data.push({ name: v.dictionariesName, value: v.total, dictionariesId: v.dictionariesId })
      })
      if (data.length > 0) {
        getSupplierName({ dictionariesId: data[0].dictionariesId }).then(res => {
          this.supplierData = res.data.records
        })
      }
      this.supplierPolar.legend.data = [...legend]
      this.supplierPolar.series[0].data = [...data]
      var domSupplier = document.getElementById('pie-supplier')
      var myChartSupplier = this.echarts.init(domSupplier, 'light')
      myChartSupplier.setOption(this.supplierPolar)

      myChartSupplier.on('click', function(params) {
        let dictionariesId = params.data.dictionariesId
        getSupplierName({ dictionariesId }).then(res => {
          _this.supplierData = res.data.records
        })
      })
    })
    // console.log('Current Swiper instance object', this.swiper)
    // this.swiper.slideTo(1, 1000, false)

    // let myChart1 = null
    this.getWarningDisposalRate({ year: this.time })

    this.getProcessTypeTotal({ year: this.time })

    this.getProcessStatusTotal({ year: this.time })
  },
  methods: {
    handleWarningNum() {
      this.$router.push({
        path: '/monitor/monitor-prewarningDetail'
      })
    },
    handleCoreDetail() {
      this.$router.push({
        name: 'reportsIndex',
        params: { scroll: true }
      })
    },
    handleTimeTypeChange(e) {
      console.log('e', e)
      if (e) {
        // 月份
        this.timeValue = this.time + '-' + '01'
      } else {
        this.timeValue = this.time
      }
      this.$ls.set('monitorTime', this.timeValue)
      let param = null
      if (this.timeType) {
        param = { month: this.timeValue }
      } else {
        param = { year: this.timeValue }
      }
      this.getWarningDisposalRate(param)
      this.getCoreList(param)
      this.getProcessTypeTotal(param)
      this.getProcessStatusTotal(param)
      this.getChargeDeptRate(param)
      this.getWarningTotal(param)
      this.getDeptRank(param)
      this.$refs.partTable.getService(param)
      this.$refs.personTable.getPersonalRank(param)
      this.$refs.windowTable.getWindow(param)
      this.$refs.doctorTable.getVisitRank(param)
    },
    handleTimeChange(value) {
      // console.log('value', value, this.timeType)
      this.$ls.set('monitorTime', value)
      let param = null
      if (this.timeType) {
        param = { month: value }
      } else {
        param = { year: value }
      }
      this.getWarningDisposalRate(param)
      this.getCoreList(param)
      this.getProcessTypeTotal(param)
      this.getProcessStatusTotal(param)
      this.getChargeDeptRate(param)
      this.getWarningTotal(param)
      this.getDeptRank(param)
      this.$refs.partTable.getService(param)
      this.$refs.personTable.getPersonalRank(param)
      this.$refs.windowTable.getWindow(param)
      this.$refs.doctorTable.getVisitRank(param)
    },
    getWarningDisposalRate(param) {
      getWarningDisposalRate(param).then(res => {
        let arr = res.data
        let yAxis = []
        let data1 = { name: '已处置', type: 'bar', data: [] }
        let data2 = { name: '未处置', type: 'bar', data: [] }
        arr.map(v => {
          yAxis.push(v.ruleName)
          data1.data.push({ value: v.hasDisposalTotal, ruleId: v.ruleId })
          data2.data.push({ value: v.notDisposalTotal, ruleId: v.ruleId })
        })
        this.polar4.yAxis.data = [...yAxis]
        this.polar4.series = [data1, data2]

        var dom1 = document.getElementById('pie-right')
        var myChart1 = this.echarts.init(dom1, 'light')
        myChart1.setOption(this.polar4)

        myChart1.on('click', params => {
          // console.log('params', params)
          let ruleId = params.data.ruleId
          this.$router.push({
            path: '/monitor/monitor-prewarningDetail',
            query: { ruleId }
          })
        })
      })
    },
    getCoreList(param) {
      // 核心指标监控列表
      getCoreIndexList(param).then(res => {
        console.log('res', res)
        this.coreData = res.data
        if (this.coreData.length > 0) {
          this.handleCoreClick(this.coreData[0], 0)
        }
      })
    },

    getProcessTypeTotal(param) {
      getProcessTypeTotal(param).then(res => {
        // console.log('getProcessTypeTotal res', res.data)
        let arr = res.data
        let legend = []
        let data = []

        arr.map(v => {
          legend.push(v.processTypeName)
          data.push({ value: v.total, name: v.processTypeName, processTypeId: v.processTypeId })
        })
        this.polar.legend.data = [...legend]
        this.polar.series[0].data = [...data]
        // 供应商类型数据获取
        var dom = document.getElementById('pie')
        var myChart = this.echarts.init(dom, 'light')
        myChart.setOption(this.polar)
        let _this = this
        myChart.on('click', function(params) {
          // console.log('getProcessTypeTotal', params)
          _this.$router.push({
            path: '/monitor/monitor-processDetail',
            query: { processTypeId: params.data.processTypeId }
          })
        })
      })
    },

    getProcessStatusTotal(param) {
      getProcessStatusTotal(param).then(res => {
        let arr = res.data
        let legend = []
        let xAxis = []
        let data1 = {
          name: '已完成',
          type: 'bar',
          stack: '广告',
          data: []
        }
        let data2 = {
          name: '未完成',
          type: 'bar',
          stack: '广告',
          data: []
        }
        arr.map(v => {
          data1.data.push({ value: v.finsh, status: 'finish' })
          data2.data.push({ value: v.notFinsh, status: 'notFinish' })
          xAxis.push(v.processTypeName)
        })
        this.polar3.xAxis[0].data = xAxis
        this.polar3.series = [data1, data2]

        var dom2 = document.getElementById('pie-two')
        var myChart2 = this.echarts.init(dom2, 'light')
        myChart2.setOption(this.polar3)

        let _this = this
        myChart2.on('click', function(params) {
          // console.log('params', params)
          let processStatus = params.data.status === 'notFinish' ? 'PROCESSING' : 'FINISH'
          _this.$router.push({
            path: '/monitor/monitor-processDetail',
            query: { processStatus }
          })
        })
      })
    },

    handleCoreClick(item, index) {
      this.divLen = index
      let param = null
      if (this.time.split('-').length > 1) {
        param = { month: this.timeValue }
      } else {
        param = { year: this.timeValue }
      }
      getCoreIndexDetails({ ...param, colName: item.colnameId }).then(res => {
        let arr = res.data
        let xAxis = []
        let data = []
        arr.map(v => {
          xAxis.push(v.dataCd)
          data.push(v.value)
        })
        this.polar2.xAxis.data = [...xAxis]
        this.polar2.series[0].data = [...data]

        var dom3 = document.getElementById('pie-area')
        var myChart3 = this.echarts.init(dom3, 'light')
        myChart3.setOption(this.polar2)
      })
    },
    getChargeDeptRate(param) {
      getChargeDeptRate(param).then(res => {
        this.tableData = res.data
      })
    },

    // 第一屏 中间大图
    getWarningTotal(param) {
      getWarningTotal(param).then(res => {
        this.prewarningObj = { ...res.data }
        let data1 = [
          { value: res.data.notDisposalTotal, name: '未处置' },
          { value: res.data.hasDisposalTotal, name: '已处置' }
        ]

        this.polarCenter.series[0].data = data1

        var pieCenter = document.getElementById('pie-center')
        var myChartCenter = this.echarts.init(pieCenter, 'light')
        myChartCenter.setOption(this.polarCenter)

        myChartCenter.on('click', params => {
          // console.log('params', params)
          this.$router.push({
            path: '/monitor/monitor-prewarningDetail'
          })
        })
      })
    },

    // 各科室风险情况点击跳转页面
    handleDeptRow(row, column, event) {
      this.$router.push({
        path: '/monitor/monitor-prewarningDetail',
        query: { deptId: row.chargeDept }
      })
    },

    // getDeptRank
    getDeptRank(param) {
      getDeptRank(param).then(res => {
        console.log('科室考评排名', res.data)

        let arr = res.data
        let yAxis = []
        let data1 = { name: '钱', type: 'bar', data: [] }
        let data2 = { name: '分', type: 'bar', data: [] }

        arr.map(v => {
          yAxis.push(v.dutyDeptName)
          data1.data.push({ value: v.rewardMoney, key: v.dutyDeptId })
          data2.data.push({ value: v.rewardScroe, key: v.dutyDeptId })
        })
        this.deptPolar.yAxis.data = [...yAxis]
        this.deptPolar.series = [data1, data2]

        var deptRight = document.getElementById('dept-right')
        var myChartRight = this.echarts.init(deptRight, 'light')
        myChartRight.setOption(this.deptPolar)

        myChartRight.on('click', params => {
          console.log('params', params)
          this.$router.push({
            path: '/monitor/monitor-evalDetail',
            query: { row: JSON.stringify(params.data) }
          })
        })
      })
    },

    // 供应商跳转详情
    handleSupplierRow(row, column, event) {
      console.log('row', row)
      let param = { ...row, entryState: 0 }
      this.$router.push({
        name: 'supplierDetailBasic',
        params: { obj: param, from: 'monitor' }
      })
    }
  }
}
</script>

<style scoped>
.bg-999 {
  background-color: #1890ff;
  color: #ffffff;
  border-radius: 6px;
}
.bg-999 h3 {
  color: #ffffff;
}
.padding10 {
  padding: 8px 16px;
  flex: 0 0 auto;
}
.fs32 {
  font-size: 32px;
}
.mt50 {
  margin-top: 50px;
}

.border-none {
  border: none;
}

.yellow {
  color: #f9d871;
}
.justify-content {
  justify-content: center;
}
</style>
